<template>
  <div class="hotelFilter">
    <el-row type="flex" align="middle">
      <el-col class="filterCol" :span="6">
        <div class="filterTitle">
          <span>价格</span>
          <span>0-{{sliderPrice*40}}</span>
        </div>
        <el-slider v-model="sliderPrice" :format-tooltip="formatTooltip" @change="handleParams"></el-slider>
      </el-col>
      <el-col class="filterCol" :span="5">
        <div class="filterTitle">住宿等级</div>
        <el-dropdown placement="top-start">
          <span class="el-dropdown-link">
            {{levelsList.length==0?'不限':`已选${levelsList.length}项`}}
            <i
              class="el-icon-arrow-down el-icon--right"
            ></i>
          </span>
          <el-dropdown-menu slot="dropdown">
            <el-checkbox-group v-model="levelsList" @change="handleParams">
              <el-dropdown-item v-for="item in hotelOption.levels" :key="item.id">
                <el-checkbox :label="item.id">{{item.name}}</el-checkbox>
              </el-dropdown-item>
            </el-checkbox-group>
          </el-dropdown-menu>
        </el-dropdown>
      </el-col>
      <el-col class="filterCol" :span="5">
        <div class="filterTitle">住宿类型</div>
        <el-dropdown placement="top-start">
          <span class="el-dropdown-link">
            {{typeList.length==0?'不限':`已选${typeList.length}项`}}
            <i
              class="el-icon-arrow-down el-icon--right"
            ></i>
          </span>
          <el-dropdown-menu slot="dropdown">
            <el-checkbox-group v-model="typeList" @change="handleParams">
              <el-dropdown-item v-for="item in hotelOption.types" :key="item.id">
                <el-checkbox :label="item.id">{{item.name}}</el-checkbox>
              </el-dropdown-item>
            </el-checkbox-group>
          </el-dropdown-menu>
        </el-dropdown>
      </el-col>
      <el-col class="filterCol" :span="5">
        <div class="filterTitle">酒店设施</div>
        <el-dropdown placement="top-start">
          <span class="el-dropdown-link">
            {{assetList.length==0?'不限':`已选${assetList.length}项`}}
            <i
              class="el-icon-arrow-down el-icon--right"
            ></i>
          </span>
          <el-dropdown-menu slot="dropdown">
            <el-checkbox-group v-model="assetList" @change="handleParams">
              <el-dropdown-item v-for="item in hotelOption.assets" :key="item.id">
                <el-checkbox :label="item.id">{{item.name}}</el-checkbox>
              </el-dropdown-item>
            </el-checkbox-group>
          </el-dropdown-menu>
        </el-dropdown>
      </el-col>
      <el-col class="filterCol" :span="5">
        <div class="filterTitle">酒店品牌</div>
        <el-dropdown placement="top-start">
          <span class="el-dropdown-link">
            {{brandList.length==0?'不限':`已选${brandList.length}项`}}
            <i
              class="el-icon-arrow-down el-icon--right"
            ></i>
          </span>
          <el-dropdown-menu slot="dropdown">
            <el-checkbox-group v-model="brandList" @change="handleParams">
              <el-dropdown-item v-for="item in hotelOption.brands" :key="item.id">
                <el-checkbox :label="item.id">{{item.name}}</el-checkbox>
              </el-dropdown-item>
            </el-checkbox-group>
          </el-dropdown-menu>
        </el-dropdown>
      </el-col>
      <el-col class="filterCol" :span="4" style="text-align:center">
        <el-button type="primary" @click="handleClear">撤销条件</el-button>
      </el-col>
    </el-row>
  </div>
</template>

<script>
export default {
  data() {
    return {
      sliderPrice: 100,
      levelsList: [],
      typeList: [],
      assetList: [],
      brandList: [],
      hotelOption: [],
    };
  },
  created() {
    this.getOption();
  },
  methods: {
    //获取配置信息
    getOption() {
      this.$axios({
        url: "/hotels/options",
      }).then((res) => {
        this.hotelOption = res.data.data;
      });
    },
    //格式化Tooltip
    formatTooltip(val) {
      return val * 40;
    },
    handleParams() {
      var obj = [];
      if (this.levelsList.length != 0) {
        this.levelsList.forEach((item) => {
          obj.push({ hotellevel_in: item });
        });
      }
      if (this.typeList.length != 0) {
        this.typeList.forEach((item) => {
          obj.push({ hoteltype_in: item });
        });
      }
      if (this.assetList.length != 0) {
        this.assetList.forEach((item) => {
          obj.push({ hotelasset_in: item });
        });
      }
      if (this.brandList.length != 0) {
        this.brandList.forEach((item) => {
          obj.push({ hotelbrand_in: item });
        });
      }
      obj.push({
        price_lt: this.sliderPrice * 40,
      });
      this.$emit("sendFliter", obj);
    },
    handleClear() {
      this.levelsList = [];
      this.typeList = [];
      this.assetList = [];
      this.brandList = [];
      (this.sliderPrice = 100), this.$emit("sendFliter", []);
    },
  },
};
</script>

<style lang="less" scoped>
.hotelFilter {
  border: 1px solid #ddd;
  padding: 10px 0;
  margin-bottom: 20px;
  .filterCol {
    border-right: 1px solid #ddd;
    padding: 0 20px;
    font-size: 14px;
    color: #666;
    .el-dropdown {
      width: 100%;
      height: 38px;
      line-height: 38px;
      .el-dropdown-link {
        display: flex;
        justify-content: space-between;
        align-items: center;
        cursor: pointer;
      }
    }
    &:last-child {
      border: none;
    }
    .filterTitle {
      display: flex;
      justify-content: space-between;
    }
  }
}
.el-dropdown-menu {
  min-width: 200px;
  max-height: 200px;
  overflow-y: auto;
}
</style>